<template>
  <div class="order-detail-container" style="margin-top: 100px">
    <!-- 订单详情卡片 -->
    <el-card class="order-card">
      <el-descriptions title="订单详情" :column="2" border style="margin-top: 450px">
        <!-- 产品图片 -->
        <el-descriptions-item label="产品图片" :span="2" style="margin-top: 100px">
      <el-image
              style="max-width: 200px; max-height: 200px; margin: auto;"
              :src="orderDetail.product.productImg"
              alt="Product Image"
              class="product-image"
              fit="cover"
      />
        </el-descriptions-item>
        <!-- 其他信息 -->
        <el-descriptions-item label="订单ID">{{ orderDetail.orderId }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderDetail.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ orderDetail.product.productName }}</el-descriptions-item>
        <el-descriptions-item label="型号">{{ orderDetail.product.modelNumber }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ orderDetail.product.unit }}</el-descriptions-item>
        <el-descriptions-item label="售价">{{ (orderDetail.product.sellingPrice / 100).toFixed(2) }} 元</el-descriptions-item>
        <el-descriptions-item label="库存">{{ orderDetail.product.stock }} {{ orderDetail.product.unit }}</el-descriptions-item>
        <el-descriptions-item label="购买数量">{{ orderDetail.productNum }}</el-descriptions-item>
        <el-descriptions-item label="总价">{{ (orderDetail.totalMoney / 100).toFixed(2) }} 元</el-descriptions-item>
        <el-descriptions-item label="邮编">{{ orderDetail.postcode }}</el-descriptions-item>

        <!-- 品牌信息 -->
        <el-descriptions-item label="品牌" :span="2">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="品牌名称">{{ orderDetail.product.brand.brandName }}</el-descriptions-item>
            <el-descriptions-item label="品牌官网">{{ orderDetail.product.brand.brandNet }}</el-descriptions-item>
            <el-descriptions-item label="品牌图片">
              <el-image
                :src="orderDetail.product.brand.brandImg"
                fit="cover"
                class="brand-image"
              />
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>

        <!-- 供应商信息 -->
        <el-descriptions-item label="供应商" :span="2">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="负责人">{{ orderDetail.product.supplier.boosName }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ orderDetail.product.supplier.phone }}</el-descriptions-item>
            <el-descriptions-item label="简介">{{ orderDetail.product.supplier.introduction }}</el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>

        <!-- 分类与标准 -->
        <el-descriptions-item label="类别与标准" :span="2">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="父类别">{{ orderDetail.product.categoryAndStandardsVO.categoryParentName }}</el-descriptions-item>
            <el-descriptions-item label="类别名称">{{ orderDetail.product.categoryAndStandardsVO.categoryCategoryName }}</el-descriptions-item>
            <el-descriptions-item label="类别图片">
              <el-image
                :src="orderDetail.product.categoryAndStandardsVO.categoryImg"
                fit="cover"
                class="category-image"
              />
            </el-descriptions-item>
            <el-descriptions-item label="标准">
              <el-descriptions :column="1" border>
                <el-descriptions-item v-for="(value, key) in orderDetail.product.categoryAndStandardsVO.standards" :key="key" v-if="value" :label="key">
                  {{ value }}
                </el-descriptions-item>
              </el-descriptions>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>

        <el-descriptions-item label="产品描述" :span="2">{{ orderDetail.product.productDescription }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 返回按钮 -->
    <div class="button-container">
      <el-button type="info" size="large" @click="router.push('/order')">返回</el-button>
    </div>
  </div>
</template>

<style scoped>
/* 容器布局 */
.order-detail-container {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f4f5f7;
  padding: 20px;
  box-sizing: border-box;
}

/* 产品图片部分 */
.product-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 订单卡片样式 */
.order-card {
  width: 100%;
  max-width: 1200px;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  word-break: break-word; /* 防止文本溢出 */
}

.el-descriptions {
  margin-bottom: 20px;
}

.brand-image,
.category-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 按钮容器 */
.button-container {
  margin-top: 20px;
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: flex-end;
}
</style>
<script setup>
import { getOrder } from "@/api/user.js";
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {useTokenStore} from "@/store/tokenStore.js";
import {ElMessage} from "element-plus";

const router = useRouter();
const route = useRoute();
const orderId = ref(route.params.orderId);

const orderDetail = ref({
  orderId: null,
  userId: null,
  product: {
    productId: null,
    brand: {
      brandId: null,
      brandName: '',
      brandNet: '',
      brandImg: ''
    },
    supplier: {
      supplierId: null,
      boosName: '',
      phone: '',
      introduction: ''
    },
    categoryAndStandardsVO: {
      categoryId: null,
      categoryParentName: '',
      categoryCategoryName: null,
      categoryImg: '',
      standards: {
        standardId: null,
        chemicalComposition: '',
        content: '',
        purity: '',
        performance: '',
        capacity: null,
        length: null,
        diameter: null
      }
    },
    productName: '',
    modelNumber: '',
    unit: '',
    marketPrice: 0,
    sellingPrice: 0,
    costPrice: 0,
    productImg: '',
    productDescription: '',
    stock: 0
  },
  singleMoney: 0,
  productNum: 0,
  orderTime: '',
  postcode: '',
  totalMoney: 0
});

onMounted(() => {
  if(useTokenStore().token!==''){
   fetchOrderDetail()
  }else {
    router.push('/')
    ElMessage({
      showClose: true,
      message: '请先登录',
      type: 'error',
    })
  }
});
const fetchOrderDetail = async () => {
  console.log(orderId.value)
   orderDetail.value = await getOrder(orderId.value);
   console.log(orderDetail.value)
}
</script>
